Como aplicar un filtro mientras carga tu pagina

21-09-2025

Si o sí necesitas JavaScript. Me imagino que se puede usar solo css™ pero con una duración predeterminada.

Nos basamos en que JavaScript tiene los famosos EventListener’s que esperan a que suceda algo para poder ejecutar un codigo que nosotros pongamos, en este caso esperaremos a que la página acabe de cargar (css, js, imágenes, cualquier cosa) usando el evento “load”.

De esta forma, solo tenemos que aplicarle un filtro a todo el body

body {
    filter: blur(8px);
    transition: filter 0.6s ease; /* El ease es para que sea suave la transición */
    overflow: hidden; /* Esto es para que no puedan scrollear mientras esta el filtro */
}

Y luego al final del body en JavaScript ponemos esto:

window.addEventListener("load", function () {
    document.body.style.filter = "none";
    document.body.style.overflow = "auto";
});

Si se entiende, verdad?